<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日期对象</title>
</head>
<body>
    <div id="date"> </div>
    <div id="time"></div>
    <!-- <img src="images/0.png" alt=""> -->
    <!-- <img src="images/dot.png" alt=""> -->
    <!-- <img src="images/1.png" alt=""> -->
    <!-- <img src="images/0.png" alt=""> -->
        <script type="text/javascript">
            function clock(){
                var myDate=new Date();
                var oTime = document.getElementById("time");
                var oDiv = document.getElementById("date");
                //一维数组
                var myNum =new Array("日","一","二","三","四","五","六");
                //日期对象里面有很多数据
                // 小时，分钟，秒，星期，日期，时区
                var year=myDate.getFullYear();
                var month=myDate.getMonth()+1;
                var day = myDate.getDay();
                var date1 = myDate.getDate();
                var hour=myDate.getHours();
                var min=myDate.getMinutes();
                var sec=myDate.getSeconds();
                hour=twoDigital(hour);
                min=twoDigital(min);
                sec=twoDigital(sec);
                hour=forma(hour);//function是小括号
                min=forma(min);
                sec=forma(sec);
                oDiv.innerHTML = year + "年" + month+"月"+ date1+ "日   星期" + myNum[day] ;
                oTime.innerHTML= hour+' <img src="images/dot.png" alt=""> '+min+' <img src="images/dot.png" alt=""> '+sec;
                setTimeout(clock,1000);
            }
            clock();
//            setInterval(clock,1000);//定时刷新

            //先封装后刷新
            //把数字转化为两位的字符串
            function twoDigital(x){
                if(x<10){
                    x="0"+x;
                }
                return x;
            }
            function forma(str){
                // 先强制性字符串
                str=String(str);
                //把两张图分别放上去    定义一个临时变量
                var temp = "";
                for(var i=0;i<str.length;i++){
                    temp = temp + '<img src="images/'+str[i]+ '.png" alt="">';//在路径上不能有空格
                }
                return temp;
            }


        </script>
    
</body>
</html>